<template>
  <div>
    <h1>我是参数设置页面</h1>
  </div>
</template>

<script>
</script>

<style>
</style>
<template>
  <div>
<!-- 页面展示内容 -->
    <el-card class="box-card">
      <!-- 参数设置信息表头 -->
      <el-table border stripe :show-header="false" :data="test1List">
        <el-table-column label=" " prop="name"align="center"></el-table-column>
      </el-table>

<!--      参数设置信息表单 -->
<!--    <el-table border stripe :data="textList" :show-header="false">
          <el-table-column label="基数名" prop="name" align="center"></el-table-column>
          <el-table-column label="金额" prop="money" ></el-table-column>
          <el-table-column label="操作" width="65px">
            <template slot-scope="scope">
              <el-button type="primary" icon="el-icon-edit" size="small" @click="updateHeadTextBtn(scope.row)" ></el-button>
            </template>
          </el-table-column>
      </el-table> -->

      <!-- 信息表单 -->
      <el-table :data="parameterList" border stripe>
        <el-table-column prop="id" label="序号"></el-table-column>
        <el-table-column prop="situation" label="考勤种类"></el-table-column>
        <el-table-column prop="details" label="时长"></el-table-column>
        <el-table-column prop="amount" label="金额"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit" size="small" @click="updateParameterBtn(scope.row)"></el-button>
            <el-button type="danger" icon="el-icon-delete" size="small" @click="deleteparameter(scope.row)"></el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.pageNum"
        :page-sizes="[6, 10, 14, 18]" :page-size="queryInfo.pageSize" layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>

      <!-- 参数设置信息添加按钮 -->
      <!-- 3.定义栅格的一行 :gutter="20"定义行间距   :span="9" 占位符  -->
      <el-row :gutter="20" >
        <el-col :span="1">
          <!-- 定义添加按钮-->
          <el-button type="primary" @click="dialogVisible = true" style="margin-top: 10px;">添加数据</el-button>

        </el-col>
      </el-row>
    </el-card>

    <!-- 点击触发页面 -->

    <!-- 添加参数数据页面 -->
    <el-dialog title="添加数据" :visible.sync="dialogVisible" width="50%" @close="closeDialog" >
      <!-- visible指的是属性绑定，表示弹框的显示隐藏，当:visible的值为ture的时候，弹框显示，sync指的就是同步动态双向的来表示visible的值 -->
      <el-form :model="addparameterModel" ref="addparameterRef" label-width="100px" class="demo-ruleForm">

        <el-form-item label="考勤种类" prop="situation">
          <el-input v-model="addparameterModel.situation"></el-input>
        </el-form-item>
        <el-form-item label="时长" prop="details">
          <el-input v-model="addparameterModel.details"></el-input>
        </el-form-item>
        <el-form-item label="金额" prop="amount">
          <el-input v-model="addparameterModel.amount"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addparameterBtn">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 修改参数设置数据页面 -->
    <el-dialog title="修改数据" :visible.sync="updateDialogVisible" width="50%" @close="closeUpdateDialog">
      <!-- 定义用户提交表单数据-->
      <el-form :model="updateParameterModel" ref="updateParameterRef" label-width="100px">
        <el-form-item label="考勤种类" prop="situation">
          <el-input v-model="updateParameterModel.situation"></el-input>
        </el-form-item>
        <el-form-item label="时长" prop="details">
          <el-input v-model="updateParameterModel.details"></el-input>
        </el-form-item>
        <el-form-item label="金额" prop="amount">
          <el-input v-model="updateParameterModel.amount"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="updateDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateParameter">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 修改参数设置数据页面 -->
  <!--  <el-dialog title="修改参数设置数据" :visible.sync="updateHeadTextDialogVisible" width="50%" @close="closeUpdateHeadTextDialog">
      <!-- 定义用户提交表单数据-->
<!--      <el-form :model="updateHeadTextModel" ref="updateHeadTextRef" label-width="100px" >
        <el-form-item label="基数名" prop="name">
          <el-input v-model="updateHeadTextModel.name"></el-input>
        </el-form-item>
        <el-form-item label="金额" prop="money">
          <el-input v-model="updateHeadTextModel.money"></el-input>
        </el-form-item>
      </el-form> --> 

<!--      <span slot="footer" class="dialog-footer">
        <el-button @click="updateHeadTextDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateHeadText">确 定</el-button>
      </span>
    </el-dialog> -->

  </div>
</template>

<script>
export default {
  data () {
    return {
      // 分页信息
      queryInfo: {
        query: '',
        pageNum: 1,
        pageSize: 6
      },
      // 参数数据信息
      parameterList: [],
      // 缴费基数设置
      textList: [],
      // 缴费基数表头（固定）
      test1List: [
        { name: '考勤参数设置' }
      ],
      total: 0,
      // 添加对话框默认关闭
      dialogVisible: false,
      // 添加对话框参数
      addparameterModel: {
        situation: '',
        details: '',
        amount: ''
      },
      // 参数修改对话框默认关闭
      updateDialogVisible: false,
      // 缴费基数修改对话框默认关闭
      // updateHeadTextDialogVisible: false,
      // 定义修改社保数据封装
      updateParameterModel: {},
      // 定义修改参数数据封装
      updateHeadTextModel: {}
    }
  },

  methods: {
    // 获取参数信息
    async getparameterList () {
      const {
        data: result
      } = await this.$http.get('/parameter/list', {
        params: this.queryInfo
      })
      if (result.status != 200) return this.$messageF.error('社保列表查询失败')
      this.parameterList = result.data.rows
      this.total = result.data.total
    },
    // // 获取缴费基础参数信息
    // async getTextList () {
    //   const {
    //     data: result
    //   } = await this.$http.get('/headText/list', {
    //     params: this.queryInfo
    //   })
    //   if (result.status != 200) return this.$messageF.error('社保列表查询失败')
    //   this.textList = result.data.rows
    // },

    handleSizeChange (pageSize) {
      // console.log("每页展现的条数"+pageSize)
      this.queryInfo.pageSize = pageSize
      this.getparameterList()
    },
    handleCurrentChange (pageNum) {
      // console.log("页数:"+pageNum)
      this.queryInfo.pageNum = pageNum
      this.getparameterList()
    },

    closeDialog () {
      // 重置表格数据
      this.$refs.addparameterRef.resetFields()
    },

    // 参数信息添加
    addparameterBtn () {
      this.$refs.addparameterRef.validate(async valid => {
        // 如果校验失败 则停止数据
        if (!valid) return

        const {
          data: result
        } = await this.$http.post('/parameter/addParameter', this.addparameterModel)
        if (result.status !== 200) return this.$message.error('数据新增失败')
        this.$message.success('数据新增成功')
        // 关闭对话框
        this.dialogVisible = false
        // 重新获取用户列表
        this.getparameterList()
      })
    },

    // 参数数据修改前获取
    async updateParameterBtn (parameter) {
      this.updateDialogVisible = true
      const {
        data: result
      } = await this.$http.get('/parameter/' + parameter.id)
      if (result.status !== 200) return this.$message.error('数据查询失败')
      this.updateParameterModel = result.data
    },
    // 缴费参数基础修改前获取
    // async updateHeadTextBtn (headText) {
    //   this.updateHeadTextDialogVisible = true
    //   const {
    //     data: result
    //   } = await this.$http.get('/headText/' + headText.name)
    //   if (result.status !== 200) return this.$message.error('数据查询失败')
    //   this.updateHeadTextModel = result.data
    // },
    // 参数数据修改对话框关闭时事件
    closeUpdateDialog () {
      // 重置表格数据
      this.$refs.updateParameterRef.resetFields()
    },
    // // 缴费基数修改对话框关闭时事件
    // closeUpdateHeadTextDialog () {
    //   // 重置参数数据
    //   this.$refs.updateHeadTextRef.resetFields()
    // },

    // 参数数据修改
    updateParameter () {
      // 1.预校验数据
      this.$refs.updateParameterRef.validate(async valid => {
        if (!valid) return this.$message.error('表单验证没有通过')
        // 根据接口文档要求封装数据
        const parameter = {}
        parameter.id = this.updateParameterModel.id
		parameter.situation = this.updateParameterModel.situation
        parameter.details = this.updateParameterModel.details
        parameter.amount = this.updateParameterModel.amount
        const { data: result } = await this.$http.put('/parameter/updateParameter', parameter)
        if (result.status !== 200) return this.$message.error('数据修改失败')
        this.$message.success('更新成功')
        this.updateDialogVisible = false
        this.getparameterList()
      })
    },
    // 缴费基数数据修改
    // updateHeadText () {
    //   // 1.预校验数据
    //   this.$refs.updateHeadTextRef.validate(async valid => {
    //     if (!valid) return this.$message.error('表单验证没有通过')
    //     // 根据接口文档要求封装数据
    //     const headText = {}
    //     headText.name = this.updateHeadTextModel.name
    //     headText.money = this.updateHeadTextModel.money
    //     const { data: result } = await this.$http.put('/headText/updateHeadText', headText)
    //     if (result.status !== 200) return this.$message.error('数据修改失败')
    //     this.$message.success('更新成功')
    //     this.updateHeadTextDialogVisible = false
    //     this.getTextList()
    //   })
    // },
    // 参数数据删除
    async deleteparameter (parameter) {
      // 1.消息确认框
      const result = await this.$confirm('此操作将永久删除 ' + parameter.situation + ', 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(error => error)

      // 如果确认  confirm  如果取消 cancel
      if (result !== 'confirm') {
        return this.$message.info('删除取消')
      }
      const { data: result2 } = await this.$http.delete(`/parameter/${parameter.id}`)
      if (result2.status !== 200) return this.$message.error('删除失败')
      this.$message.success('删除成功')
      // 重新加载 数据
      this.getparameterList()
    }

  },
  // 进入页面自动获取信息
  mounted () {
    this.getparameterList(),
    this.getTextList()
  }
}
</script>

<style lang="less" scoped>

</style>
